import React from 'react'
//withRouter,routerRedux实现页面子路由跳转
import {withRouter,routerRedux} from 'dva/router'
import * as api from '../services/example'

class Product extends React.Component{
  componentDidMount() {
    api.getProduct()
      .then(res=>{console.log(res)})
  }

  addProduct=()=>{
    this.props.dispatch({
      type:'product/updateList',
    })
  }
  addProductHttp=()=>{
    this.props.dispatch({
      type:'product/updateListHttp',
    })
  }
  reduceProduct=(index)=>{
    this.props.dispatch({
      type: 'product/reduceList',
      index:index
    })
  }
  reduceProductSync=(index)=>{
    this.props.dispatch({
      type: 'product/reduceListSync',
      index:index
    })
  }
  toIndex=()=>{
    this.props.history.push('/')
  }
  toIndexRouterRedux=()=>{
    this.props.dispatch(routerRedux.push('/'))
  }
  render() {
    return (
      <div>
        product商品：{this.props.title} <hr/>
          <ul>
            {this.props.productList.map((item,index)=>(
              <li key={index}>
                {item.name} ——
                <button onClick={()=>{this.reduceProduct(index)}}> reduce </button>
                <button onClick={()=>{this.reduceProductSync(index)}}> reduceSync </button>
              </li>
              ))
            }
            <button onClick={this.addProduct}>add</button> <br/>
            <button onClick={this.addProductHttp}>add by http</button> <br/>
            <button onClick={this.toIndex}>withRouter</button><br/>
            <button onClick={this.toIndexRouterRedux}>routerRedux</button>

          </ul>
      </div>
    )
  }
}
export default withRouter(Product)

